<!-- 
  ref:
    定义一个基本数据的响应式数据。
    可用于模板和reactive中。在模板和reactive中，修改数据不需要通过.value
    其它地方，需要通过.value修改数据。

  toRef:
    把一个响应式对象（reactive创建）中的某一个数据变成ref，具有响应式。
    两者保持引用关系。

  toRefs:
    将响应式对象（reactive创建）中的每一个属性都转化成ref
    两者保持引用关系。

  toRefs的应用场景：
    function useXxx(){
      const state = reactiv({
        x:1,
        y:2
      })
      // 逻辑运算

      // return state
      return toRefs(state)
    }

    export defautl{
      setup(){
        const {x,y} = useXxx()

        return {x,y}
      }
    }

  最佳使用：
    1）reactive做响应式对象，ref做基本数据类型响应式。
    2）在setup中返回toRefs(响应式对象) 或 toRef(state,"xx")
    3）如果是一个ref，建议命名使用xxxRef

  一个ref，使用时为什么需要.value？
  答：在reative中和模板中是不需要.value。vue内部会自动帮我们.value。其它地方是需要.value。
    一个ref本质是一个对象，通过.value属性的get和set才能实现响应式。
    value中存储了一个值。

  为什么需要toRef和toRefs？
  答：
    初衷：在不丢失响应式的情况下，把响应式对象中的属性打散。
    使用前提：toRef和toRefs针对的是响应式对象
    说白了：toRef和toRefs不创造响应式，而是延续响应式。

 -->